<template>
  <!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
  <a-drawer
      v-model:open="visible"
      ref="employeeDetailModalRef"
      class="edit-drawer modal-fixed-bottom"
      root-class-name="root-customer-drawer"
      width="1000px"
      :closable="false"
      @close="onClose"
  >
    <div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
    <div class="modal-header">{{ $t('self.user.tips14') }}</div>

<!--    <div class="base-flex base-rows base-align-items-center">-->
<!--      <a-tag color="green">{{ $t('self.user.tips17') }} {{ detail.totalAmountBig }} {{ $t('self.user.tips16') }}</a-tag>-->
<!--      <a-tag color="green">{{ $t('self.user.tips18') }} {{ detail.totalChargeQuantity }} Kwh</a-tag>-->
<!--      <a-tag color="green">{{ $t('self.user.tips19') }} {{ detail.totalChargeTimes }} {{ $t('self.user.tips20') }}</a-tag>-->
<!--    </div>-->

    <s-table ref="stableRef" :api-obj="tableConfig.apiObj" api-method="POST" :api-auto-load="false" :params="tableConfig.params" :columns="sourceColumn" row-key="id" :is-row-selection="false" :is-show-tool="false">
    </s-table>

  </a-drawer>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $API = proxy.$API
const $T = proxy.$t
const emit = defineEmits(['close','ok'])

const visible = ref(false)
const stableRef = ref(null)
const tableConfig = ref({
  apiObj: $API.backend.user.accountOrder,
  params: {
    userId: ''
  }
})
// 表格列
const sourceColumn = ref([])
const detail = ref({
  "totalChargeQuantity": "16.289",
  "totalChargeTimes": 30.90,
  "totalAmountBig": "12.71",
  "data": [{
    "orderNo": "20241030142616036592",
    "userAccMoney": 30.0,
    "totalChargeQuantity": "16.289",
    "totalChargeMoney": 12.71,
    "createTime": "2024-10-30 14:26:16.0"
  }],
  "totalCount": 1,
  "pageNo": 1,
  "pageSize": 10,
  "totalPage": 1
})
const resetDefaultOptionsByLang = () => {
  sourceColumn.value = [
    {
      title: $T('self.user.modal.col1'),
      dataIndex: 'orderNo',
      key: 'orderNo',
      // width: 110
    },
    {
      title: $T('self.order.tips222'),
      dataIndex: 'totalChargeQuantity',
      key: 'totalChargeQuantity'
    },
    {
      title: $T('self.user.modal.col3'),
      dataIndex: 'totalChargeMoney',
      key: 'totalChargeMoney',
    },
    {
      title: $T('self.user.modal.col4'),
      dataIndex: 'userAccMoney',
      key: 'userAccMoney',
    },
    {
      title: $T('self.createTimeTxt'),
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ]
}

const onClose = () => {
  visible.value = false
  emit('close')
}

const show = (userId) => {
  visible.value = true
  tableConfig.value.params.userId = userId
  // 获取表格列
  resetDefaultOptionsByLang()
  setTimeout(() => {
    stableRef.value.reload()
  }, 200)
}

// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.edit-drawer {
  position: relative;
  .closeable {
    @include closeable;
  }
}
</style>
